"use client";
import React, {useState} from "react";
import Link from "next/link";
import {useRouter, useSelectedLayoutSegment} from "next/navigation";
import {Group, SegmentedControl, Stack} from "@mantine/core";

export default function Layout({children}: {children: React.ReactNode}) {
  const segment = useSelectedLayoutSegment(); // 当前选中的路由段
  const [currentValue, setCurrentValue] = useState("nodes");
  const router = useRouter(); // 用于手动导航
  // 定义 Segments 对应的路由
  const segments = [
    {label: "节点表", value: "nodes"},
    {label: "局向表", value: "edges"},
    {label: "拓扑图", value: "graph"},
  ];

  console.log(segment);

  return (
    <Stack>
      <Group justify="space-between">
        <SegmentedControl
          value={segment || "nodes"} // 当前选中的值，默认为 "nodes"
          onChange={(value) =>
            router.push(`/ipdv2/tools/relay-simulation/network-backbone/${value}`)
          } // 路由跳转逻辑
          data={segments.map((item) => ({
            label: item.label,
            value: item.value,
          }))}
        />
      </Group>
      {children}
    </Stack>
  );
}
